<template>
  <div>
    <div class="linkage">
      <el-select
          v-model="searchMap.province"
          placeholder="省级地区">
        <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select
          v-model="searchMap.city"
          placeholder="市级地区">
        <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select
          v-model="searchMap.county"
          placeholder="区级地区">
        <el-option
            v-for="item in countyList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" circle @click="findBySearch()"></el-button>
    </div>
    <el-button icon="el-icon-edit" @click="handleSave()">点击添加</el-button>
    <el-button size="small" type="primary" @click="deleteConsignee(sels)" :disabled="sels.length === 0">批量删除</el-button>
    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
          label="序号"
          prop="id"
          width="180">
      </el-table-column>
      <el-table-column
          label="收货人名称" prop="name"
          width="180">
      </el-table-column>
      <el-table-column
          label="收货人地址(省/市/区)" prop="address"
          width="180">
      </el-table-column>
      <el-table-column
              label="手机号" prop="phone"
              width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=searchMap.currentPage
          :page-sizes="[2, 4, 8, 10]"
          :page-size=searchMap.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=searchMap.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "ConsigneeList",
  data() {
    return {
      searchMap: {
        currentPage: 1,
        pageSize: 2,
        total: 0,
        cid: 0,
        province:'',
        city:'',
        county:''
      },
      tableData: [],
      provinceList:[],
      cityList:[],
      countyList:[],
      sels:[]
    }
  },
  methods: {
    findBySearch() {
      axios.post("http://127.0.0.1:8181/consignee/findPage", this.searchMap).then(res => {
        this.tableData = res.data.rows;
        this.searchMap.total = res.data.total;
      })
    },
    handleEdit(index, row) {
      // 跳转路由的同时 携带ID
      // 1. 编程时导航  path: `/user/${username}`
      this.$router.push({path: `/ConsigneeSaveOrEdit/` + row.id})
    },
    handleSave() {
      this.$router.push({path: `/ConsigneeSaveOrEdit`})
    },
     /* handleDelete(row) {
          //先删除中间表
          //再删除检查组本身
          //alert(row.id);
          this.$confirm("你确定要删除当前数据吗？","提示",{
              type:'warning'
          }).then(()=>{
              //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
              axios.get("/one/delete.do?id=" + row.id).then((res) => { //点击确定执行的操作
                  if(res.data.flag){
                      //执行成功
                      //弹出成功提示信息
                      this.$message({
                          type:'success',
                          message:res.data.message
                      });
                      //重新进行分页查询
                      this.findPage();
                  }else{
                      //执行失败
                      this.$message.error(res.data.message);
                  }
              })
          }));
      }*/
    handleDelete(index,row) {
    this.$confirm("你确定要删除当前数据吗？","提示",{
        type:'warning'
    }).then(()=> {
        axios.get(`http://127.0.0.1:8181/consignee/deleteById/${row.id}`).then(res => {
            this.findBySearch()
        })
    })
    },
    handleSizeChange(val) {
      this.searchMap.pageSize = val;
      this.findBySearch();
    },
    handleCurrentChange(val) {
      this.searchMap.currentPage = val;
      this.findBySearch();
    },
    getProvinceData(){
      axios.get("http://localhost:8181/consignee/findPCC/0").then(res=>{
        this.provinceList = res.data;
      })
    },
    getCityData(id){
      axios.get(`http://localhost:8181/consignee/findPCC/${id}`).then(res=>{
        this.cityList = res.data;
      })
    },
    getCountyData(id){
      axios.get(`http://localhost:8181/consignee/findPCC/${id}`).then(res=>{
        this.countyList = res.data;
      })
    },
    handleSelectionChange(sels) {
      this.sels = sels
    },
    deleteConsignee(){
      var ids= this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
      axios.get("http://localhost:8181/consignee/deleteConsignee?ids="+ids).then(res=>{
        // eslint-disable-next-line no-empty
        this.findBySearch()
        if (res.data){
          this.$message({
            message: "删除成功",
            type: 'success'
          });
        }
      })
    }
  },
  mounted() {
    this.findBySearch();
    this.getProvinceData();
  },
  watch:{
    'searchMap.province'(id){
      this.getCityData(id);
      this.cityList = [];
      this.countyList = [];
      this.searchMap.city = '';
      this.searchMap.county = '';
    },
    'searchMap.city'(id){
      this.getCountyData(id);
      this.countyList = [];
      this.searchMap.county = '';
    }
  }
}
</script>

<style scoped>

</style>
